<template>
    <component is="a-modal" v-model:visible="visible" :width="1200" :title="title" :mask-closable="false"
        :ok-loading="loading" @cancel="close" @before-ok="submit">
        <a-spin :loading="loading" tip="数据加载中···" style="width: 100%;">
            <a-descriptions title="" bordered :column="4">
                <a-descriptions-item label="订单ID:" :span="1">{{ info?.info?.id }}</a-descriptions-item>
                <a-descriptions-item label="订单号" :span="1">{{ info?.info?.order_sn }}</a-descriptions-item>
                <a-descriptions-item label="下单时间" :span="1">{{ info?.info?.create_time }}</a-descriptions-item>
                <a-descriptions-item label="支付时间" :span="1">{{ info?.info?.pay_time }}</a-descriptions-item>
                <a-descriptions-item label="订单价格" :span="1">{{ info?.info?.order_total_cny }}</a-descriptions-item>
                <a-descriptions-item label="已支付" :span="1">
                    <div v-for="(item,indx) in info?.info?.payLog" :key="index">
                        {{ item.pay_title }} {{ item.pay_num }}
                    </div>
                </a-descriptions-item>
                <a-descriptions-item label="支付方式" :span="1">{{ info?.info?.pay_way }}</a-descriptions-item>
                <a-descriptions-item label="支付状态" :span="1">{{ info?.info?.pay_state_text }}</a-descriptions-item>
                <a-descriptions-item label="订单状态" :span="1">{{ info?.info?.order_state_text }}</a-descriptions-item>
                <a-descriptions-item label="订单留言" :span="1">{{ info?.info?.note }}</a-descriptions-item>
                <a-descriptions-item label="下单会员" :span="4">UID: {{
                    info?.info?.area == 1 ? `${'GB' + info?.info?.user?.id}` : `${info?.info?.user?.id}` }}, 会员名: {{
                        info?.info?.user?.user_name }} 姓名: {{ info?.info?.user?.true_name }}</a-descriptions-item>
                <a-descriptions-item label="收货地址" :span="4" v-if="info?.info?.getMethods == 'post'">{{
                    info?.info?.address?.province }}-{{ info?.info?.address?.city }}-{{ info?.info?.address?.district
                    }}-{{
                        info?.info?.address?.address }} {{ info?.info?.address?.name }} - {{ info?.info?.address?.mobile }}-
                    {{ '(邮编: ' + info?.info?.address?.mobile + ')' }}{{ '( 税号: ' + info?.info?.address?.tax + ')'
                    }}</a-descriptions-item>
                <a-descriptions-item label="订单留言" :span="4" v-else>
                    <div v-if="info?.info?.ziti_info"> 自取（取件人：{{ info?.info?.ziti_info?.ziti_name }}电话：{{
                        info?.info?.ziti_info?.ziti_mobile }}）</div>
                </a-descriptions-item>
            </a-descriptions>
            <a-table :pagination="false" :columns="columns_2" :data="info?.info?.payLog" :stripe="true"
                style="margin-top:10px">
                <template #pay_num="{ record }">
                    <div><text v-if="record.money_code=='CNY'?'¥':''"></text> {{ record.pay_num }}</div>
                </template>
            </a-table>

            <a-table :pagination="false" :columns="columns" :data="info.orderGoods" :stripe="true"
                style="margin-top:10px">
                <template #goods_name="{ record }">
                    <div>{{ record.goods_name }}({{ record.goods_type_text }})</div>
                </template>
                <template #price="{ record }">
                    <div>{{ record.price }} <text v-if="record.goods_type!='common' && record.goods_type!='common2'">¥{{ record.price_cny }}</text></div>
                </template>
            </a-table>
        </a-spin>
    </component>
</template>

<script setup>
import { ref, reactive, computed, watch } from 'vue'
import { Message } from '@arco-design/web-vue'
import mallApi from '@/api/system/mall'
import ENUMS from '@/utils/enums'
import { throttle } from 'lodash'
const exchangeRef = ref()
import tool from '@/utils/tool'
const paramsData = ref({})
const getParams = async () => {

}
const emit = defineEmits(['success'])
console.log('ENUMS', ENUMS.STATE);
// 引用定义
const formRef = ref()
const mode = ref('')
const visible = ref(false)
const loading = ref(false)

let title = computed(() => {
    return '详情'
})
// 表单信息
const formData = reactive({
    id: "",
})
const columns = [
    { title: '产品名称', slotName: 'goods_name', width: 150, align: 'center' },
    { title: '购买数量', dataIndex: 'number', width: 150, align: 'center' },
    { title: '价格', slotName: 'price', width: 150, align: 'center' },
    { title: '规格', dataIndex: 'sku_text', width: 150, align: 'center' },
]
const columns_2 = [
    { title: '支付方式', dataIndex: 'pay_title', width: 150, align: 'center' },
    { title: '支付金额', slotName: 'pay_num', width: 150, align: 'center' },
    { title: '时间', dataIndex: 'create_time', width: 150, align: 'center' },
    { title: '备注', dataIndex: 'other_msg', width: 150, align: 'center' },
]
// 验证规则
const rules = ref({

});
// 打开弹框
const open = async (data) => {
    formData.id = data.id
    visible.value = true
    // formRef.value?.resetFields()
    await initPage()
    await getParams()
}

// 初始化页面数据
const info = ref({})
const initPage = async () => {
    loading.value=true
    const { data } = await mallApi.orderDetail(formData.id)
    info.value = { ...data }
    loading.value=false
    console.log('info?.info?', info.value);
}

// 设置数据
const setFormData = async (data) => {
    for (const key in formData) {
        if (data[key] != null && data[key] != undefined) {
            formData[key] = data[key]
        }
    }
}

// 数据保存
const submit = throttle(async (done) => {
    const validate = await formRef.value?.validate()
    if (!validate) {
        loading.value = true
        try {
            let data = { ...formData }
            let result = {}
            if (mode.value === 'add') {
                // 添加数据
                data.id = undefined
                result = await mallApi.addSku(data)
            } else {
                // 修改数据
                result = await mallApi.updateSku(data)
            }
            if (result.code === 200) {
                Message.success(result.msg || '操作成功')
                emit('success')
                done(true)
            }
            // 防止连续点击提交
            setTimeout(() => {
                loading.value = false
            }, 500)
        } catch {
            loading.value = false
        }
    }
    done(false)
}, 100)

// 关闭弹窗
const close = () => (visible.value = false)

defineExpose({ open, setFormData })
</script>